<template>
  <div class="popular_container">
    <div class="container">
      <h2 class="home_item_title"><span>热门职业</span><b>POPULAR JOB</b></h2>
      <ul class="popular_list">
        <li  v-for="(item,index) in List"
          :key="index"
          class="list_item">
          <p><img :src="item.picUrl" :alt="item.talentName"/></p>
          <h2>{{item.talentName}}</h2>
        </li>
      </ul>
      <router-link tag="button" to="/hot" class="hot_btn">查看更多</router-link>
    </div>
  </div>
</template>
<!--suppress JSAnnotator -->
<script>
  /* eslint-disable quotes */
  export default {
    name: 'HomePopular',
    props: {
      List: Array
    }
  }
</script>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .popular_container {
    padding: 70px 0 100px;
  }
  .popular_list {
    margin-top 40px;
    overflow hidden
    .list_item {
      width: 166px;
      height: 210px;
      float: left;
      margin-left: 72px;
      text-align center;

      &:first-child {
        margin-left 0
      }
      p {
        width 100%
        height 166px;
        cursor default;
        img {
          width 100%
          height 100%;
          transition .3s all;
        }
        &:hover{
          img{
            transform rotate(360deg);
          }
        }
      }
      h2 {
        margin-top 20px;
        font-size: 16px;
        color: #000000;
        opacity: 0.9;
      }
    }
  }
  .hot_btn{
    background: $mainColor;
    display block;
    width 120px;
    height 40px;
    border-radius 20px;
    font-size 14px;
    color #fff;
    text-align center
    margin 40px auto 0;
    &:hover{
      background: lighten( $mainColor,10%);
    }
    &:active{
      background: darken( $mainColor,10%);
    }
  }
</style>
